import { Fragment } from '@/components/Fragment'; 
import {
  Card,
  View,
  Flex,
  Text,
  Expander,
  ExpanderItem,
} from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

import { CardDemo } from './demo';
import {
  DefaultCardExample,
  CardThemeExample,
  CardStylePropsExample,
  CardClassNameExample,
  CardAsExample,
  CardVariationsExample,
} from './examples';

## Demo

<CardDemo />

## Usage

The Card component will include basic styling but the form of the Card component will come from the content passed into it.

<Example>
  <DefaultCardExample />
  
  <ExampleCode>

```jsx file=./examples/DefaultCardExample.tsx

```

  </ExampleCode>
</Example>

### Variations

<Example>
  <CardVariationsExample />
  
  <ExampleCode>

```jsx file=./examples/CardVariationsExample.tsx

```

  </ExampleCode>
</Example>

### Set rendered HTML element

The Card component renders as a `div` by default. You can change the HTML element rendered by Card with the `as` property.

<Example>
  <CardAsExample />
  
  <ExampleCode>

```jsx file=./examples/CardAsExample.tsx

```

  </ExampleCode>
</Example>

## Customization

<ThemeExample component="Card">
  <Example>
    <CardThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/CardThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Card" />

### CSS

To override styling on all Cards, you can set the Amplify CSS variables or use the built-in `.amplify-card` class.

<Example>
  <Card className="amplify-ui-card-thick-border"> Thick Bordered Card </Card>
  
  <ExampleCode>

```css
/* styles.css */
:root {
  --amplify-components-card-border-color: red;
  --amplify-components-card-border-width: 3px;
}
/* OR */
.amplify-card {
  border: 3px solid red;
}
```

</ExampleCode>
</Example>

To replace _all_ the Card styling, unset it:

```css
.amplify-card {
  all: unset;
  /* Add your styling here*/
}
```

### Local styling

To override styling on a specific Card, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <CardClassNameExample />
  
  <ExampleCode>

```jsx file=./examples/CardClassNameExample.tsx

```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <CardStylePropsExample />
  
  <ExampleCode>

```jsx file=./examples/CardStylePropsExample.tsx

```

  </ExampleCode>
</Example>

### Default theme

```ts file=../../../../../../packages/ui/src/theme/tokens/components/card.ts

```